/**
 * 首页组件
 */
<script setup>
import HomeGeo from '@/components/home/HomeGeo.vue'
import HomeTop from '@/components/home/HomeTop.vue'
import HomeCenter from '@/components/home/HomeCenter.vue'
import HomeBottom from '@/components/home/HomeBottom.vue'
import FactoryPopup from '@/components/home/HomePopups/FactoryPopup.vue'
import BrandPopup from '@/components/home/HomePopups/BrandPopup.vue'
import ModelPopup from '@/components/home/HomePopups/ModelPopup.vue'
import EmployeePopup from '@/components/home/HomePopups/EmployeePopup.vue'
import WarehousingPopup from '@/components/home/HomePopups/WarehousingPopup.vue'
import CompletedPopup from '@/components/home/HomePopups/CompletedPopup.vue'
import ProportionPopup from '@/components/home/HomePopups/ProportionPopup.vue'
import ProgressPopup from '@/components/home/HomePopups/ProgressPopup.vue'
</script>

<template>
  <div class="home-container">
    <div class="home-below">
      <HomeGeo/>
    </div>

    <div class="home-above">
      <div class="home-top">
        <HomeTop/>
      </div>

      <div class="home-center">
        <HomeCenter/>
      </div>

      <div class="home-bottom">
        <HomeBottom/>
      </div>
    </div>
  </div>

  <FactoryPopup/>
  <BrandPopup/>
  <ModelPopup/>

  <EmployeePopup/>
  <WarehousingPopup/>
  <CompletedPopup/>
  <ProportionPopup/>
  <ProgressPopup/>
</template>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  background-color: #12161b;

  .home-below {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .home-above {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;

    .home-top {
      width: 100%;
      height: 5%;
      margin-bottom: 1%;
    }

    .home-center {
      width: 100%;
      height: 13%;
      margin-bottom: 1%;
    }

    .home-bottom {
      width: 100%;
      height: 78%;
    }
  }
}
</style>